<style scoped>
    #page-service {
        background: #f4f4f4;
    }
    .ripple{
        position:relative;
        overflow:hidden
    }
    .ripple:after{
        content:"";
        background:rgba(0,0,0,0.3);
        display:block;
        position:absolute;
        border-radius:50%;
        padding-top:240%;
        padding-left:240%;
        margin-top:-120%;
        margin-left:-120%;
        opacity:0;
        transition:all 1s
    }
    .ripple:active:after {
        padding-top:0;
        padding-left:0;
        margin-top:0;
        margin-left:0;
        opacity:1;
        transition:0s
    }

    .m-service-wrap {
        height: 100%;
        background: #f4f4f4;
        letter-spacing: 1px;
    }
    .m-service-box {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        background: #fff;
        font-family: "Microsoft Yahei";
        box-sizing: border-box;
        border-bottom: 1px solid #e6e6e6;
    }
    .m-service-box > *{
        padding: 0 10px;
    }

    .m-service-title {
        width: 100%;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        color: #5e5e5e;
        font-size: 15px;
        border-bottom: 1px solid #e6e6e6;
        font-weight: bold;
    }
    .m-service-content {

    }
    .m-service-content a {
        color: inherit;
        /*display: block;*/
    }
    .m-service-content .list-item {
        position: relative;
        line-height: 30px;
        color: #5e5e5e;
        font-size: 13px;
        padding-right: 10px;
        border-bottom: 1px solid #e6e6e6;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .m-service-content .list-item a {
        display: block;
    }
    /*.m-service-content .list-item:last-of-type {*/
        /*border-bottom: none;*/
    /*}*/
    .m-service-content .list-item-child:last-of-type {
        border-bottom: 1px solid #e6e6e6;
    }
    .m-service-commenqa .list-item > .ico-in {
        border-color: #db3752;
        transition: .5s ease all;

    }

    .m-service-commenqa .list-item i{
        color: #db3752;
        font-size:16px;
    }

    .list-item-content:last-of-type .list-item-child:last-of-type {
        border-bottom: none;

    }
    .list-item-content .list-item-child > .ico-in {
        border-color: #c4c4c4;
    }
    .m-service-content .list-item.warning {
        color: #db3752;
    }
    .list-item-content {
        /*display: none;*/
        height: 0;
        overflow: hidden;
    }
    .m-service-call .m-call {
        width: 100%;
        display: block;
    }

    .m-service-call .m-call i{
        color: #db3752;
        font-size:16px;
    }

    .m-service-more {
        position: relative;
        color: #db3752;
        border: none;
    }
    .m-service-more .m-service-title {
        color: currentColor;
    }
    .m-service-more .m-service-content a {
        position: absolute;
        line-height: 44px;
        height: 44px;
        padding-right: 15px;
        right: 0;
        top:0;
        width: calc(100% - 25px);
        width: -webkit-calc(100% - 25px);
        text-align: right;
    }
    .ico-in {
        width: 10px;
        height: 10px;
        border-top: 1px solid #c4c4c4;
        border-right: 1px solid #c4c4c4;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        right: 3px;
        top: 9px;
    }

    .icon-questionfill::before {
        color: #db3752;
        font-size: 18px;
        margin-right: 4px;
    }

    .m-service-hotwrap {
        height: 100%;
        background: #f4f4f4;
    }
    .m-service-hotwrap .m-service-title .m-service-title {
        color: #303030;
    }
    .m-service-hotwrap .m-service-title,.m-service-hotwrap .m-service-content {
        padding: 0;
    }
    .m-service-tips .m-service-content {
        font-size: 13px;
        line-height: 16px;
        color: #5e5e5e;
        padding-bottom: 16px;
    }
    .m-service-tips .m-service-content span.m-service-hottitle {
        color: #db3752;
        display: block;
        padding: 10px 0 2px 0;
    }
    .m-service-hotwrap .m-service-box,.m-service-hotwrap .m-service-more .m-service-title {
        border: none;
    }
    .m-service-hotwrap .m-service-box {
        padding: 0 10px;
    }
    .m-service-box .m-service-more {
        color: #db3752;
    }
    .m-service-feedback .m-service-title ,.m-service-feedback .m-service-content {
        border: none;
        height: 45px;
    }
    .m-service-feedback .m-service-title {

    }
    .m-service-feedback .m-service-content {
        text-align: center;
        color: #8f8f8f;
    }
    .feedback-btn {
        display: inline-block;
        width: 48%;
        height: 30px;
        border: 1px solid #666;
        border-radius: 6px;
        color: #3e3e3e;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    .feedback-btn i {
        display: inline-block;
        width: 18px;
        height: 18px;
        position: relative;
        margin-right: 6px;
    }
    .feedback-btn i::before {
        display: block;
        content: '';
        width: 18px;
        height: 18px;
        position: absolute;
        left: 0;
        top: 3px;
        background: url("");
        background-size: 100%;
    }
    .good-feedback-btn i::before{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    .toggle .list-item-title i {
        transform: rotate(135deg)
    }
    .toggle .list-item-content {
        height: auto;
        overflow: auto;
    }
</style>
<template>
    <div class="page-wrap page-service" id="page-service">
        <header-component :page-name="pageName"></header-component>

        <section class="m-service-wrap ">
            <div class="m-service-box m-service-call">
                <div class="m-service-title ripple">反馈与建议</div>
                <div class="m-service-content">
                    <div class="list-item">
                        <a :href="Config.serverUrl" class="m-call"><i class="ifont">&#xe611;</i>我要反馈</a><i class="ico-in"></i>
                    </div>
                </div>
            </div>

            <div class="m-service-box m-service-hotqa">
                <div class="m-service-title ripple">热点问题</div>
                <div class="m-service-content">
                    <!--<div class="list-item warning">-->
                    <!--<a href="?c=servicedetail">众联寻宝提醒您：保护自身利益，避免损失</a><i class="ico-in"></i>-->
                    <!--</div>-->
                    <div class="list-item" v-for="i in data.item | filterBy '1' in 'type'">
                        <a v-link="{path:'/serviceDetail',query:{qaid:i.id}}"  data-id="{{i.id}}">{{i.title}}</a><i class="ico-in"></i>
                    </div>
                </div>
            </div>

            <div class="m-service-box m-service-commenqa">
                <div class="m-service-title ripple">常见问题分类</div>
                <div class="m-service-content">
                    <div v-bind:class="{toggle:show===2}">
                        <div class="list-item list-item-title" @click="show===2?show=1:show=2">
                            <a href="javascript:">平台问题</a><i class="ico-in"></i>
                        </div>
                        <div class="list-item-content" v-if="show===2">
                            <div class="list-item list-item-child" v-for="i in data.item | filterBy '2' in 'type'">
                                <a v-link="{path:'/serviceDetail',query:{qaid:i.id}}" data-id="{{i.id}}"><i class="ifont ">&#xe61f;</i>{{i.title}}</a><i class="ico-in"></i>
                            </div>
                        </div>
                    </div>

                    <div  v-bind:class="{toggle:show===3}">
                        <div class="list-item list-item-title" @click="show===3?show=1:show=3">
                            <a href="javascript:">支付问题</a><i class="ico-in"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item list-item-child" v-for="i in data.item | filterBy '3' in 'type'">
                                <a v-link="{path:'/serviceDetail',query:{qaid:i.id}}" data-id="{{i.id}}"><i class="ifont ">&#xe61f;</i>{{i.title}}</a><i class="ico-in"></i>
                            </div>
                        </div>
                    </div>

                    <div v-bind:class="{toggle:show===4}">
                        <div class="list-item list-item-title" @click="show===4?show=1:show=4">
                            <a href="javascript:">物流与售后</a><i class="ico-in"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item list-item-child" v-for="i in data.item | filterBy '4' in 'type'">
                                <a v-link="{path:'/serviceDetail',query:{qaid:i.id}}" data-id="{{i.id}}"><i class="ifont ">&#xe61f;</i>{{i.title}}</a><i class="ico-in"></i>
                            </div>
                        </div>
                    </div>

                    <div v-bind:class="{toggle:show===5}">
                        <div class="list-item list-item-title" @click="show===5?show=1:show=5">
                            <a href="javascript:">其他咨询</a><i class="ico-in"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item list-item-child" v-for="i in data.item | filterBy '5' in 'type'">
                                <a v-link="{path:'/serviceDetail',query:{qaid:i.id}}" data-id="{{i.id}}"><i class="ifont ">&#xe61f;</i>{{i.title}}</a><i class="ico-in"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="m-service-box m-service-more ripple">
                <div class="m-service-title">需要更多帮助？</div>
                <div class="m-service-content">
                    <a :href="Config.serverUrl" class="m-call"><i class="ifont lineico19"></i>联系客服</a>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import headerComponent from '../components/header'
    import Request from '../config/request'
//    import Config from '../config/config'
    module.exports = {
        data() {
            return {
                pageName:'服务中心',
                data: {
                    item:[],
                },
                show:2,
                Config:Config
            }
        },
        components:{
            headerComponent
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {
            let res = await Request.get(Config.apiDomain+'/index/serviceGuide')
            this.data.item = res.data.item;
            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },
        methods: {
            back(){
                this.statusPop=false;
                history.go(-1)
            }
        }
    }
</script>
